<template>
    <div class="header">
        <div class="wrapper">
            <h1 class="logo">金色童年APP管理后台</h1>
            <div class="header_r">
                <div class="user-info">
                    <!-- 个人信息 -->
                    <span class="dot"></span>
                    <div class="username" @click='show'>{{username}}
                        <i class="arrow" :class='{revolve:isMenus}'></i>
                        <div class="menus" v-show='isMenus'>
                            <ul>
                                <li><a href="javascript:void(0);" @click='logOut'>退出</a></li>
                            </ul>
                        </div>
                    </div><!-- 姓名 -->
                </div>
            </div>
        </div>
        <!-- 退出提示层****开始 -->
        <el-dialog
            title="提示框"
            :visible.sync="dialogVisible"
            width="30%">
            <span>是否退出系统,如果是请点击确定，不是请点击取消</span>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
                <el-button size="mini" type="primary" @click="logOutSubmit()">确 定</el-button>
            </span>
        </el-dialog>
        <!-- <div class="layer" v-if='isLayer'>
            <div class="shade"></div>
                <div class="layerbody">
                    <a href="javascript:void(0);" class="closes" @click='closeLayer'></a>
                    <h4>提示框</h4>
                    <div class="layerCon">
                        <div class="layerCon_l" style=""></div>
                        <div class="layerCon_r">
                            <h2>是否退出系统</h2>
                            <span>如果是请点击确定，不是请点击取消</span>
                        </div>
                    </div>
                    <div class="layerbtn">
                        <a href="javascript:void(0);" class="btns" @click='logOutSubmit()'>确定</a>
                        <a href="javascript:void(0);" class="btns cancel" @click='closeLayer'>取消</a>
                    </div>
                </div>
        </div> -->
        <!-- 退出提示层****结束 -->
        <!--<reset-pwd ref="resetPwd"></reset-pwd>-->
    </div>
</template>

<script>
import {logoutUrl} from '../axios/api.js'
import {config} from '@/config.js'
//import reset_pwd from "../page/mine/reset_pwd.vue"
export default {
    components:{
//        "reset-pwd":reset_pwd,
    },
  data () {
    return {
        isLayer:'',  //弹层时候显示
        username :  '',
        isMenus  : false ,    //下拉菜单，是否显示
        MenuList:[],//菜单项
        MenuListUrl:[],//url的存放数组
        dialogVisible: false
    }
  },
  mounted() {
    // 获取用户名
    this.username =localStorage.getItem('userList');
    console.log(JSON.parse(JSON.stringify(localStorage.getItem('userList'))));
    

    //获取本地存储的 menuList
    this.MenuList = JSON.parse(localStorage.getItem("menuList"));

  },
  methods: {
    // 关闭弹层
    closeLayer(){
        this.isLayer = !this.isLayer;
    },
    // 退出弹层
    logOut(){
        //显示弹层
        this.dialogVisible = !this.dialogVisible;
    },
    //页面重定向
    redirect(url,id){
        // console.log(id);
        this.$store.commit('SET_MENUID',id);
        // 把一级菜单主键放入idlocalStorage
        localStorage.setItem(config.FIRST_MENU_ID,id);
        // this.$router.push(url);
    },
    // 退出提交
    logOutSubmit(){
        const self = this;
        self.$router.push('/');
        // 删除localStrorage
        localStorage.clear();
        // self.$store.commit("GET_INIT")
        // self.$store.commit("SET_MENUID", localStorage.getItem(null))
        // self.axios({
        //     method: "post",
        //     url: logoutUrl
        // })
        // .then(function(response) {
        //     if(response.data.success){
        //         // 操作成功
        //         self.$message({
        //             duration: 800,
        //             message: response.data.msg,
        //             type:'success',
        //             center: true,
        //             onClose:function(){
        //                 // 删除localStrorage
        //                 localStorage.clear();
        //                 // self.$store.commit("GET_INIT")
        //                 // self.$store.commit("SET_MENUID", localStorage.getItem(null))
        //                 // 路由跳转
        //                 self.$router.push('/');
        //             }
        //         });
        //     }else{
        //         // 操作成功
        //         self.$message({
        //             message: response.data.msg,
        //             type:'error',
        //             center: true
        //         });
        //     }

        // })
    },
    // 下拉菜单是否显示
    show(){
        this.isMenus = ! this.isMenus;
    },
    // 菜单路由路径去空格
    Trim(url){
        return url = $.trim(url);
    },
    // 判断当前选中状态
    judgeStatus(url){
        let str = this.$route.path;
        if(str.indexOf(url) != -1){
            return true
        }else{
            return false
        }
    },
    showResetPwdShowDialog(){
        this.$refs.resetPwd.showDialog();
    }
  },
  created(){}
}
</script>

<style scoped>
    .header {
        height: 50px;
        background: #3a445c;
        font-size: 14px;
    }
    .header .wrapper{
        height: 50px;
        overflow: initial;
    }
    .header .logo{
        overflow: hidden;
        float:left;
        font-size: 18px;
        font-weight: normal;
        color: #FFF;
        line-height:50px;
        height:50px;
        margin:0 53px 0 0;
        padding-left:68px;
        background:url(../../static/img/logo.png) no-repeat 25px center;
        background-size: auto 38px;
    }
    .nav{
        float: left;
        overflow: hidden;
    }
    .nav>li{
        float: left;
        /* padding: 14px 2px; */
        height: 50px;
        margin-right: 5px;
    }
    .nav>li>a{
        display: block;
        color: #a9b0c0;
        height: 49px;
        line-height: 50px;
        padding: 0 10px;
        border-bottom: 2px solid #3a445c;
    }
    .nav>li>a:hover{
        background:transparent;
    }
    .nav>li>a:focus,
    /* .nav>li:first-child > a .router-link-active, */
    .nav>li>a.router-link-active{
        color: #FFF;
        background: #3a445c;
        border-bottom: 2px solid #FFF;
    }

    .header_r{
        float: right;
        padding:15px 20px 15px 0;
    }
    /* 个人信息 */
    .user-info{
        float: right;
        position: relative;
        margin-bottom: 0;
    }
    .user-logo{
        width: 20px;
        height: 20px;
        border-radius: 50%;
        float: left;
        margin-bottom: 0;
    }
    .user-info .username{
        position: relative;
        float: left;
        font-weight: normal;
        height: 20px;
        line-height: 20px;
        padding: 0 15px 0 10px;
        color: #a9b0c0;
        margin: 0 10px 0 0;
    }
    .arrow{
        position: absolute;
        top: 7px;
        right:0;
        width: 6px;
        height: 6px;
        border: 1px solid #a9b0c0;
        border-color: transparent  #a9b0c0  #a9b0c0  transparent;
        -webkit-transform-origin: center center;
        -moz-transform-origin: center center;
        -ms-transform-origin: center center;
        -o-transform-origin: center center;
        transform-origin: center center;

        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);

        -webkit-transition: all .5s ease-in;
           -moz-transition: all .5s ease-in;
            -ms-transition: all .5s ease-in;
             -o-transition: all .5s ease-in;
                transition: all .5s ease-in;
    }
    /* 下拉菜单 */
    .header_r .menus{
        padding: 10px 0;
        position: absolute;
        top: 35px;
        right: -20px;
        z-index: 5;
        width: 120px;
        background: #FFF;
        line-height: 26px;
        font-size: 12px;
        box-shadow: 2px 3px 6px 1px rgba(34, 59, 93, 0.26);
    }
    .header_r .menus a{
        display: block;
        height: 30px;
        line-height: 30px;
        padding-left: 20px;
        color: #666;
    }
    .header_r .menus a:hover{
        text-decoration: none;
        color: #00bbbd;
        background: #eee;
    }
    .revolve{
        top: 10px;
        transform:rotate(-135deg);
        -ms-transform:rotate(-135deg);
        -moz-transform:rotate(-135deg);
        -webkit-transform:rotate(-135deg);
        -o-transform:rotate(-135deg);
    }
</style>
